import React, { useState, useRef } from "react";
import { Text, StyleSheet, View, Button } from "react-native";
import DraggableFlatList, {
    ScaleDecorator,
    RenderItemParams,
} from "react-native-draggable-flatlist";
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import { runOnJS } from "react-native-reanimated";
import { mapIndexToData, Item } from "../utils";
import { Tester, Filter, TestCase, TestSuite } from '@rnoh/testerino';

const NUM_ITEMS = 10;
const initialData: Item[] = [...Array(NUM_ITEMS)].map(mapIndexToData);

export default function Basic() {
    const [data, setData] = useState(initialData);
    const draggableListRef = useRef<React.ElementRef<typeof DraggableFlatList>>(null);

    const renderItem = ({ item, drag, isActive, getPanGestureRef }: RenderItemParams<Item> & { getPanGestureRef?: () => any }) => {
        const panRef = getPanGestureRef?.();
        const longPress = Gesture.LongPress()
            .simultaneousWithExternalGesture(panRef || [])
            .onStart(() => {
                console.log("LongPress.onStart", {
                    key: item.key,
                });
                runOnJS(drag)();
            })
            .onEnd((_e, success) => {
                console.log("LongPress.onEnd", { success });
            });

        return (
            <ScaleDecorator>
                <GestureDetector gesture={longPress}>
                    <View
                        style={[
                            styles.rowItem,
                            { backgroundColor: isActive ? "red" : item.backgroundColor },
                        ]}
                    >
                        <Text style={styles.text}>{item.text}{item.key}</Text>
                    </View>
                </GestureDetector>
            </ScaleDecorator>
        );
    };
    const renderPlaceholderFunction = ({ item, index }: { item: Item; index: number }) => {
        return (
        <View style={[
            { backgroundColor: `${item.backgroundColor}30` } // 30% 透明度
        ]}>
            <Text>拖动 "{item.text}"</Text>
        </View>
        );
    };
     const scrollToTop = () => {
        draggableListRef.current?.scrollToOffset({ offset: 0, animated: true });
    };
    const [logMessages, setLogMessages] = useState([]);

  
    return (
        <Tester style={{ flex: 1, marginTop: 30 }}>
            <View style={{ flex: 1 }}>
                <DraggableFlatList
                    data = {data}
                    onDragBegin = {(index) => {
                        console.log("onDragBegin", { index });
                    }}
                    onPlaceholderIndexChange ={(index) => {
                        console.log("onPlaceholderIndexChange", { index });
                    }}
                    onDragEnd = {({ data, from, to }) => {
                        console.log("onDragEnd", { from, to });
                        setData(data);
                    }}
                    
                    renderItem = {renderItem}
                    onScrollOffsetChange = {(offset) => {
                        console.log('onScrollOffsetChange:', offset);
                    }}
                    onRelease = {(index) => {
                        console.log(' onRelease:', index);
                    }}
                    animationConfig = {{
                        damping: 3, 
                        mass: 1,
                        stiffness: 100, 
                        overshootClamping: true,
                    }}
                    renderPlaceholder = {renderPlaceholderFunction}
                    autoscrollThreshold = {100}
                    autoscrollSpeed = {50}
                    activationDistance = {10}
                    containerStyle = {styles.listContainer}
                    keyExtractor = {(item) => item.key}
                />
            </View>
        </Tester>
    );
}

const styles = StyleSheet.create({
    listContainer: {
        flex: 1,
        backgroundColor: "#07f336ff",
        width: '80%',
        borderWidth: 5,
        borderColor: '#3498db',
        borderRadius: 12,
    },
    rowItem: {
        height: 100,
        alignItems: "center",
        justifyContent: "center",
    },
    text: {
        color: "white",
        fontSize: 24,
        fontWeight: "bold",
        textAlign: "center",
    },
});
